<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
    <!-- 
    MVVM是什么？
    M: Model模型层
    V: View视图层
    VM: ViewModel层（视图模型），VM是MVVVM中的核心部分（它起到了一个核心的非常重要的作用）

    MVVM是目前前端开发领域中非常流行的开发思想（一种架构模式）
    目前前端的大部分主流框架都实现了这个MVVM思想，例如VUE ，React等
    
    ViewModel层是Model和View的桥梁，

    MVVM模型中倡导了Model和View分离
    假如Model和view不分离，使用最原始的原生jS代码写项目
    如果数据发生任意的改动，接下来我们需要编写大量的操作dom元素的js代码
    将model和view分离之后，出现了一个VM核心，这个vm把所有的脏活累活全干了，
    只需要在model层发生任何改动，vm层就会自动的更新view层，不需要我们操心任何事情

    -->
    
    <div class="app">
        <input type="text" v-model:value="msg">
    </div>
</body>
<script>
    new Vue({
        el:".app",
        data:{
            msg:"hello world",
        }

    })
</script>
</html>